<DOCTYPE html>
    <html lang="zh-CN">

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="..\bootstrap3\css\bootstrap.min.css" rel="stylesheet">
        <script src="..\bootstrap3\js\jquery-1.12.4.min.js">

        </script>
        <script src="..\bootstrap3\js\bootstrap.min.js">

        </script>

    </head>
    <div class="container-fuild">
        <div class="col-md-10">
            <h4>下拉列表<kbd>用法</kbd></h4>
            <p>通过data属性或JavaScript，下拉式插件切换隐藏内容(下拉菜单)。在父列表项上打开类。</p>

            <p>在移动设备上，打开一个下拉菜单会增加一个。下拉菜单是在点击菜单时关闭下拉菜单的一个点击区域，这是对iOS支持的一个要求。这意味着从一个打开的下拉菜单切换到一个不同的下拉菜单</p>

            <p> 注意:<code>data-toggle="dropdown"</code>属性是在应用程序级别关闭下拉菜单的，所以总是使用它是一个好主意。</p>
            <pre> 用法一 通过 data 属性：  将 data-toggle="dropdown" 添加到一个链接或按钮上，以切换下拉菜单。</pre>
            <div class="dropdown" id="myDropdown">

                 <button id="lb1" class="btn btn-default" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="width:200px">
                   <span id="lb1_value" style="align:left">按钮形式下拉框</span>
                   <span class="caret" style="align:right"></span>
                </button>  
                <!--<a id="lb1" data-target="#" href="http://模态框.html" data-toggle="dropdown" style="width:200px">
                   <span id="lb1_value">链接形式下拉框</span>
                   <span class="caret" style="text-align:right"></span>
                </a>!-->
                <ul class="dropdown-menu" aria-labelledby="lb1">
                    <li><a href="javascript:selectValue('lb1',1)" data-value="1">1</a></li>
                    <li><a href="javascript:selectValue('lb1',2)" data-value="2">2</a></li>
                    <li><a href="javascript:selectValue('lb1',3)" data-value="3">3</a></li>
                </ul>
            </div>
            <pre> 用法二 通过 javascript ：  通过JavaScript调用下拉菜单。</pre>
            <code>$('.dropdown-toggle').dropdown()</code>
        </div>
    </div>

    </html>
    <script>
        /*
    $("#myDropdown").on('hide.bs.dropdown',function(e){
        var currentElement=$(e.relatedTarget)
        var selectValue=currentElement.data('value')
        alert(selectValue)
        $('#lb1').text(selectValue);
    })
    */
        function selectValue(target, value) {
            //alert("target:" + target + "\r\n" + "value:" + value)
            $('#'+target+'_value').text(value);
        }
    </script>